<template>
	<view class="live-item u-border-bottom" @click="handleClick">
		<image class="cover-img" mode="aspectFill" :src="cover"></image>
		<text class="title u-line-1">{{title}}</text>
		<view class="info">
			<view class="author">
				<image class="avatar" mode="scaleToFill"  width="58rpx" height="58rpx" :src="exhibitorLogo">
					</u-image>
					<text class="author-name u-line-1">{{exhibitor}}</text>
			</view>
			<view class="datetime">
				<u-image mode="scaleToFill" width="38rpx" height="38rpx" src="/static/imgs/live-date.png"></u-image>
				<text :class="[getTextClass]">{{formatStartTime}}</text>
			</view>
			<view class="status">
				<u-image mode="widthFix" width="44rpx" :src="getIcon"></u-image>
				<text :class="[getTextClass]">{{getStatusText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		name: "LiveItem",
		props: {
			liveId: {
				type: Number
			},
			
			title: {
				type: String
			},

			cover: {
				type: String
			},

			exhibitor: {
				type: String
			},

			exhibitorLogo: {
				type: String
			},

			startTime: {
				type: String
			},

			endTime: {
				type: String
			},

			link: {
				type: String
			},

			isPlayback: {
				type: Number
			},

			playbackStartTime: {
				type: String
			},

			playbackEndTime: {
				type: String
			},
		},
		computed: {
			// 是否未开始
			isNotStart() {
				return dayjs().isBefore(dayjs(this.startTime))
			},

			isEnded() {
				return dayjs().isAfter(dayjs(this.endTime))
			},

			getStatusText() {
				if (this.isNotStart) {
					return '未开播'
				} else {
					if (this.isEnded) {
						return this.isPlayback ? '直播回放' : '已结束'
					}

					return '直播中'
				}
			},

			getIcon() {
				if (this.isNotStart) {
					return '/static/imgs/live-not-start.png'
				} else {
					if (this.isEnded) {
						return this.isPlayback ? '/static/imgs/live-playback.png' : '/static/imgs/live-offline.png'
					}

					return '/static/imgs/live-online.png'
				}
			},

			getTextClass() {
				if (this.isNotStart) {
					return 'not-start'
				} else {
					if (this.isEnded) {
						return this.isPlayback ? 'playback' : 'ended'
					}

					return ''
				}
			},

			formatStartTime() {
				return dayjs(this.startTime).format('MM/DD HH:mm:ss')
			}
		},
		methods: {
			handleClick() {
				if (this.isNotStart) {
					uni.showToast({
						icon: 'none',
						title: '活动未开始'
					})
				} else {
					if (this.isEnded && !this.isPlayback) {
						uni.showToast({
							icon: 'none',
							title: '活动已结束'
						})
					} else {
						this.$emit('play', this.liveId)
						wx.navigateToMiniProgram({
							shortLink: this.link,
							fail: err => {
								console.log(err)
								if (err.errMsg.includes('invalid short link')) {
									uni.showToast({
										icon: 'none',
										title: '无效的小程序链接，请在后台检查填写'
									})
								}
							}
						})

					}
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.live-item {
		margin-top: 38rpx;
		width: 100%;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		.cover-img {
			width: 100%;
			height: 282rpx;
			border-radius: 5px;
			box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: .16);
		}

		.title {
			display: inline-block;
			width: 100%;
			box-sizing: border-box;
			font-size: 18px;
			font-family: '微软雅黑';
			font-weight: bold;
			padding: 32rpx 12rpx 0;
		}

		.info {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 12rpx 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.author {
				display: flex;
				align-items: center;

				.avatar {
					width: 58rpx;
					height: 58rpx;
					border-radius: 5px;
					box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: .16);
				}

				.author-name {
					margin-left: 22rpx;
					display: inline-block;
					width: 136rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #7D7D7D;
				}
			}

			.datetime {
				// flex: 1;
				display: flex;
				align-items: center;

				text {
					margin-left: 8rpx;
					font-size: 28rpx;
					color: #EB5D3E;

					&.not-start {
						color: #273368;
					}

					&.ended {
						color: #7D7D7D;
					}

					&.playback {
						color: #7D7D7D;
					}
				}
			}

			.status {
				display: flex;
				align-items: center;

				text {
					margin-left: 10rpx;
					// font-size: 14px;
					font-size: 28rpx;
					color: #1C8B27;

					&.ended {
						color: #919492;
					}

					&.not-start {
						color: #273368;
					}

					&.playback {
						color: #EB5D3E;
					}
				}
			}

			.end-status {
				display: flex;
				align-items: center;

				text {
					margin-left: 10rpx;
					font-size: 14px;
					color: #919492;
				}
			}
		}
	}
</style>
